<!-- 我的订单 -->
<template>
  <div class="my-order">
    <van-nav-bar fixed title="我的订单" safe-area-inset-top>
      <template #left>
        <img style="width: 30px; margin-right: 10px" src="../../assets/images/返回2.png" @click="() => $router.go(-1)"
          alt="" />
        <img style="width: 30px" @click="() => $router.push({ path: '/' })" src="../../assets/images/返回首页.png" alt="" />
      </template>
    </van-nav-bar>
    <!--  -->
    <van-search background="none" shape="round" v-model="search" @search="onSearch" placeholder="请输入订单号或商品名称" />
    <van-tabs v-model="active" animated @click="onClick" title-active-color="#3e96e8" color="#3e96e8">
      <van-tab :name="1" title="全部">
        <all ref="child1" :data="list"></all>
      </van-tab>
      <van-tab :name="2" title="待付款">
        <daifukuan ref="child2" :data="list"></daifukuan>
      </van-tab>
      <van-tab :name="3" title="待发货">
        <daifahuo ref="child3" :data="list"></daifahuo>
      </van-tab>
      <!-- <van-tab :name="4" title="待收货">
        <daishouhuo :data="list"></daishouhuo>
      </van-tab> -->
    </van-tabs>
  </div>
</template>

<script>
import all from "./module/all.vue";
import daifukuan from "./module/daifukuan.vue";
import daishouhuo from "./module/daishouhuo.vue";
import daifahuo from "./module/daifahuo.vue";
export default {
  name: "",
  components: {
    all,
    daifukuan,
    daifahuo,
    daishouhuo,
  },
  data() {
    return {
      search: "",
      active: 1,
      // 订单列表数据
      list: []
    };
  },
  methods: {
    onSearch(val) {
      var that = this;
      console.log("active", this.active);
      var name = this.active;
      if (name == "1") {
        setTimeout(() => {
          that.$refs.child1.getData(this.search);
        }, 200);

      } else if (name == "2") {
        setTimeout(() => {
          that.$refs.child2.getData(this.search);
        }, 200);

      } else if (name == "3") {
        setTimeout(() => {
          that.$refs.child3.getData(this.search);
        }, 200);

      }
    },
    onClick(name, title) {
      console.log("name", name, title);


      var that = this;
      if (name == "1") {
        setTimeout(() => {
          that.$refs.child1.getData();
        }, 200);

      } else if (name == "2") {
        setTimeout(() => {
          that.$refs.child2.getData();
        }, 200);

      } else if (name == "3") {
        setTimeout(() => {
          that.$refs.child3.getData();
        }, 200);

      }



    },

  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    // 获取传参,跳转tabs
    let type = this.$route.query.type;
    console.log(type)
  },
};
</script>

<style lang="scss" scoped>
:deep(.van-search__content) {
  background-color: #fff;
}

.my-order {
  width: 100%;
  padding-top: 92px;
}
</style>